<template>
	<Content title="箱码件码绑定">
		<view class="main-box">
			<u-form labelPosition="left" :model="model" labelWidth="80" labelAlign="left" :rules="rules" ref="uForm">
				<view class="info-box">
					<view class="input-box">
						<u-form-item label="标签流水:" prop="mode" @click="onFocus('标签流水')" required>
							<u-input :class="['box-input', btnName == '标签流水' ? 'isThis' : '']" readonly label
								v-model="model.tagSerialNumber" @click="onFocus" placeholder="请点击扫码">
								<div slot="suffix" @click.stop="scanCode('标签流水')">
									<u-icon name="scan"></u-icon>
								</div>
							</u-input>
						</u-form-item>
					</view>
					<view class="input-box">
						<u-form-item label="箱码:" prop="mode" @click="onFocus('箱码')" required>
							<u-input :class="['box-input', btnName == '箱码' ? 'isThis' : '']" readonly label
								v-model="model.mode" @click="onFocus('箱码')" placeholder="请点击扫码">
								<div slot="suffix" @click.stop="scanCode('箱码')">
									<u-icon name="scan"></u-icon>
								</div>
							</u-input>
						</u-form-item>
					</view>
					<view class="input-box">
						<u-form-item label="件码:" prop="itemCodebyList" @click="onFocus('件码')" required>
							<u-input :class="['box-input',btnName == '件码' ? 'isThis' : '']" readonly label
								:value="lasterBoxCode" @click="onFocus('件码')" placeholder="请点击扫码">
								<div slot="suffix" @click.stop="scanCode1">
									<u-icon name="scan"></u-icon>
								</div>
							</u-input>
						</u-form-item>
					</view>
				</view>
				<view class="info-box">
					<view class="input-box">
						<u-form-item required label="数量" prop="reportedQuantity">
							<u-input class="box-input" readonly :value="model.itemCodebyList.length" clearable>
								<!-- <template slot="suffix">
									<u-icon @click.native="scanCode2" name="scan"></u-icon>
								</template> -->
							</u-input>
						</u-form-item>
						<scroll-view scroll-y="true" style="height: 300px;">
							<u-form-item v-for="(item, index) in model.itemCodebyList" :key="index">
								<view class="delet-btn">
									<u-icon size="22px" @click.native="deleteThis(index)" name="trash-fill"></u-icon>
								</view>
								<u-input class="box-input" v-model="item.itemCode" readonly>
									<!-- <template slot="suffix">
										<u-icon @click.native="scanCode2" name="scan"></u-icon>
									</template> -->
								</u-input>
							</u-form-item>
						</scroll-view>
					</view>
				</view>
				<view class="but-box" style="margin:0 20rpx 10rpx">
					<view class="btn">
						<u-button type="primary" @click="submit" text="确定"></u-button>
					</view>
				</view>
			</u-form>
		</view>

	</Content>
</template>

<script>
	import Content from "@/components/content/index";
	import fetch from "@/utils/fetch";
	import {
		getNotice,
		setNotice,
		getUserInfo
	} from "@/store/user.js";
	import {
		initScan,
		startScan,
		stopScan
	} from "@/utils/scan";
	export default {
		components: {
			Content,
		},
		data() {
			return {
				btnName: "",
				id: "",
				model: {
					tagSerialNumber: '',
					mode: '',
					itemCodebyList: [],
				},
				isFocus: false,
				rules: {
					mode: {
						required: true,
						message: "请选择",
						trigger: ["blur", "change"],
					},
					tagSerialNumber: {
						required: true,
						message: "请选择",
						trigger: ["blur", "change"],
					},
					itemCodebyList: {
						type: "array",
						required: true,
						message: "请选择",
						trigger: ["blur", "change"],
					},
				},
				itemCode: 0,
				lasterBoxCode:'',
			};
		},
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.id = option.workOrder;
		},
		onHide() {
			stopScan();
		},
		onReady: function() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		onShow: function() {
			initScan(this.scanSuccess);
			startScan();
		},
		methods: {
			deleteThis(index){
				this.model.itemCodebyList.splice(index,1)
			},
			async scanSuccess(code) {
				// console.log('红外线扫码的结果', code);
				let res = {
					result: code,
				};
				// 下面就是写取到结果后的事情
				this.scanAfter(res);
			},
			scanAfter(res){
				const that = this;
				if (this.btnName == "箱码") {
					that.model.mode = res.result;
				} else if (this.btnName == "件码") {
					that.addBoxData(res);
				} else if (this.btnName == "标签流水") {
					const res1=res.result.split(';');
					that.model.tagSerialNumber = res1[1];
				}
			},
			addBoxData(res) {
				const that = this;
				if (that.model.itemCodebyList.some((item) => item.itemCode == res.result))
					return;
				that.model.itemCodebyList.push({
					itemCode: res.result,
				});
				this.lasterBoxCode=res.result;
			},
			scanCode(name) {
				// 允许从相机和相册扫码
				const that = this;
				uni.scanCode({
					success: function(res) {
						that.scanAfter(res)
					},
				});
			},
			onFocus(name) {
				if (this.btnName == name) {
					this.btnName = "";
				} else this.btnName = name;
			},
			scanCode1() {
				// 允许从相机和相册扫码
				const that = this;
				uni.scanCode({
					success: function(res) {
						that.addBoxData(res);
					},
				});
			},
			submit() {
				const that = this;
				this.$refs.uForm.validate().then((valid) => {
					if (valid) {
						that.$loading.open();
						console.log(JSON.stringify(that.model))
						fetch("post", "/dms/bxCode/bxCodeDing", {
							...that.model,
						}).then((data) => {
							that.$loading.close();
							uni.$emit("openToast", {
								type: "success",
								title: "操作成功",
								complete() {
									uni.navigateBack({
										delta: 1,
									});
								},
							});
						});
					} else {}
				});
			},
		},
		// destroyed() {
		//   uni.setStorageSync("getSelectList", null);
		// },
	};
</script>

<style scoped lang="scss">
	.isThis {
		border: 1px solid #f17a0a !important;
	}

	.delet-btn {
		width: 150rpx;
		padding: 0 30rpx 0 0;
		display: flex;
		justify-content: center;
	}

	.device-details {
		height: 100%;
		overflow: auto;
		padding-bottom: 150rpx;

		.content {
			min-height: 100%;
		}

		.title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
			padding: 0 40rpx 20rpx 40rpx;
			border-bottom: 1px solid #e0e0e0;
			display: flex;
			align-items: center;

			.txt {
				flex: 1;
			}

			.tag-box {
				display: flex;
				align-items: center;
			}
		}
	}
</style>